<%--
  Created by IntelliJ IDEA.
  User: Root404
  Date: 2022/7/14
  Time: 9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
<input type="text" id="txt1" placeholder="失焦异步注册1原生态"><span id="sp1"></span>
<br/>
<input type="text" id="txt2" placeholder="失焦异步注册3辛建华"><span id="sp2"></span>
<br/>
<input type="text" id="txt3" placeholder="失焦异步注册3特检版"><span id="sp3"></span>
</br>
<span>异步查询泛型集合
    <input type="text" id="t1" name="user">
    <input type="button" id="bt" value="异步查询泛型集合"> </span>
</br>
<table border="4">
    <tr>
        <th>id</th>
        <th>name</th>
       <%-- <th>sex</th>
        <th>hobby</th>--%>
    </tr>
</table>
<ul id="ul1"></ul>
<ul id="ul2"></ul>
<ul id="ul3"></ul>
<input type="button" id="bt1" value="点我远程加载a"> </span>
<script src="../js/jquery.js"></script>
<script>
    //异步查询模糊
    $("#bt").click(function () {
        var name=$("#t1").val();
        $.getJSON("${pageContext.request.contextPath}/ServletAjax?op=find&name="+name,
        function (data) {
            $.each(data,function () {
                var tr="<tr>"+"<td>"+this.id+"</td>"+"<td>"+this.name+"</td>"+"</tr>";
                //+"<td>"+this.sex==1?"男":"女"+"</td>"+"<td>"+this.hobby+"</td>"+
                $("table").append(tr);
            });
        });

    });








    //js 变jq
    //1数组版
    var json1=[1,2,3,4];
    var $json1=$(json1);
    $.each($json1,function () {
       var li="<li>"+this+"</li>";
       $("#ul1").append(li);
    });
    //2对象版
    var json2={"name":"超哥","age":33};
    var $json2=$(json2);
    $.each($json2,function () {
        var li="<li>"+this.name+"</li>";
        $("#ul2").append(li);
    });
    //3泛型集合版
    var json3=[{"name":"超哥","age":33},{"name":"蝴蝶","age":33},{"name":"波波","age":34}];
    var $json3=$(json3);
    $.each($json3,function () {
        var li="<li>"+this.name+":"+this.age+"</li>";
        $("#ul3").append(li);
    });





    $("#txt3").blur(function () {
        var txt=$(this).val();
        if(txt==""||txt==null){
            $("#sp3").html("沙雕内容不能为空");
        }else {
            $("#sp3").html(" ");
            //简化版json
            $.get("${pageContext.request.contextPath}/ServletAjax?op=register2&name="+txt,
                function (data) {
                    if(data=="yes"){
                        $("#sp3").html("对不起，已被注册");
                    }else{
                        $("#sp3").html("恭喜可以注册");
                    }
                });
        }
    });

    $("#txt2").blur(function () {
        var txt=$(this).val();
        if(txt==""||txt==null){
            $("#sp2").html("沙雕内容不能为空");
        }else {
            $("#sp2").html(" ");
            //简化版json
            $.ajax(
                {//地址+值
                "url":"${pageContext.request.contextPath}/ServletAjax?op=register1&name="+txt,
                 "success":function (data) {
                     if(data=="yes"){
                         $("#sp2").html("对不起，已被注册");
                     }else{
                         $("#sp2").html("恭喜可以注册");
                     }
                    }
                }
            );
        }
    });



    $("#txt1").blur(function () {
            var txt=$(this).val();
            if(txt==""||txt==null){
                $("#sp1").html("沙雕内容不能为空");
            }else {
                $("#sp1").html(" ");
            //1)新建异步引擎
        var xmlHttpRequest = new XMLHttpRequest();
        //2引擎发动异步技术 方法 地址+值 默认开启异步
        xmlHttpRequest.open("get",
            "${pageContext.request.contextPath}/ServletAjax?op=register&name="+txt,true);
        //3发值
        xmlHttpRequest.send(null);
        //4设置回调函数
         xmlHttpRequest.onreadystatechange=callback;//声明
         //5回调处理函数
         function callback() {//判断异步成功回来
                if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200){
                    //6得到回来的值
                    var data = xmlHttpRequest.responseText;
                    //7对结果进行处理
                    if(data=="yes"){
                        $("#sp1").html("对不起，已被注册");
                    }else{
                        $("#sp1").html("恭喜可以注册");
                    }
                }
                }
            }
    });
</script>
</body>
</html>
